<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import { ref } from 'vue'
const newsList = ref([
        {
			name: '濮阳人工智能创新应用示范基地正式揭牌',
			content: '7月20日，濮阳人工智能创新应用示范基地在濮阳市高新技术开发区正式揭牌成立。该基地总投资5亿元，占地面积200亩，将重点围绕智能制造、智慧城市、数字医疗等领域开展人工智能技术研发和应用示范。',
			time:'2025-07-20'
		},
		{
			name: '基地与清华大学人工智能研究院签署战略合作协议',
			content: '6月15日，濮阳人工智能创新应用示范基地与清华大学人工智能研究院签署战略合作协议，双方将在人才培养、技术研发和成果转化等方面开展深度合作。清华大学将派出专家团队常驻基地，共同打造人工智能创新平台。',
			time:'2025-06-15'
		},
		{
			name: '基地首期工程竣工，10家人工智能企业入驻',
			content: '5月28日，濮阳人工智能创新应用示范基地首期工程竣工并投入使用，首批10家人工智能企业正式入驻。这些企业涵盖计算机视觉、自然语言处理、智能机器人等多个领域，将为濮阳市数字化转型提供有力支撑。',
			time:'2025-05-28'
		},
		{
			name: '基地举办首届人工智能创新应用大赛',
			content: '4月10日，濮阳人工智能创新应用示范基地举办首届人工智能创新应用大赛，吸引了来自全国各地的50多支团队参赛。大赛聚焦智能制造、智慧农业等本地产业需求，评选出一批优秀应用解决方案。',
			time:'2025-04-10'
		}])
const galleryList = ref([
        {
			name: '人工智能研发中心',
			content: '建筑面积2万平方米，配备高性能计算中心和专业实验室',
		},
		{
			name: '智能数据中心',
			content: '采用绿色节能设计，PUE值低于1.3，提供强大的数据存储和计算能力',
		},
		{
			name: '智能应用测试场',
			content: '模拟真实场景的测试环境，支持无人驾驶、智能机器人等应用测试',
		},
		{
			name: '人工智能培训中心',
			content: '配备先进教学设备，可同时容纳200人培训，培养AI专业人才',
		},
		{
			name: '创新应用展示中心',
			content: '集中展示人工智能在各领域的创新应用成果和解决方案',
		},
		{
			name: '企业孵化区',
			content: '为初创企业提供办公空间和配套服务，培育人工智能创新企业',
		}])
const mediaList = ref([
        {
			name: '央视新闻：濮阳打造人工智能创新高地',
			content: '央视新闻频道报道了濮阳人工智能创新应用示范基地揭牌仪式，重点介绍了基地在推动区域数字化转型和产业升级方面的战略意义。',
			time:'中央电视台 | 2025年7月21日'
		},
		{
			name: '人民日报：人工智能赋能传统产业转型',
			content: '人民日报专题报道了濮阳人工智能创新应用示范基地如何通过人工智能技术帮助当地制造业企业实现智能化改造，提升生产效率。',
			time:'人民日报 | 2025年6月20日'
		},
		{
			name: '科技日报：濮阳AI基地的创新实践',
			content: '科技日报详细报道了濮阳人工智能创新应用示范基地在技术研发、成果转化和人才培养方面的创新做法和实践经验。',
			time:'科技日报 | 2025年5月30日'
		},
		{
			name: '河南新闻联播：濮阳人工智能基地助力高质量发展',
			content: '河南新闻联播专题报道了濮阳人工智能创新应用示范基地如何通过技术创新推动当地经济高质量发展。',
			time:'河南电视台 | 2025年4月15日'
		},
		])
</script>

<template>
  <Header></Header>
  <div class="details">
    <h1 class="page-title">新闻资讯</h1>
    <p class="page-subtitle">濮阳人工智能创新应用示范基地最新动态、建设进展和媒体报道</p>
    <div class="news-section">
      <h2 class="section-title">动态资讯</h2>

      <div class="news-list">
		<div class="news-item" v-for="(item, index) in newsList" :key="index">
		  <div class="news-date">{{item.time}}</div>
		  <div class="news-content">
		    <h3>{{item.name}}</h3>
		    <p>{{item.content}}</p>
		    <a href="javascript:;">阅读全文 →</a>
		  </div>
		  <img src="@/assets/img/static/nuandong_sj.png" alt="news" class="news-image">
		</div>
      </div>
    </div>


    <div class="news-section gallery-section">
      <h2 class="section-title">基础设施风采</h2>
      <p>濮阳人工智能创新应用示范基地拥有先进的基础设施和完善的配套服务，为人工智能技术研发和应用示范提供有力支撑。</p>

      <div class="gallery-grid">
        <div class="gallery-item" v-for="(item, index) in galleryList" :key="index">
          <img src="@/assets/img/static/nuandong_sj.png" alt="gallery" class="gallery-image">
          <div class="gallery-caption">
            <h3>{{item.name}}</h3>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>

      <div class="video-container">
        <iframe src="https://www.youtube.com/embed/example" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
      </div>
    </div>


    <div class="news-section">
      <h2 class="section-title">媒体报道</h2>
      <p>濮阳人工智能创新应用示范基地受到各级媒体广泛关注，以下是一些重点报道：</p>
	  
      <div class="media-list">
        <div class="media-item" v-for="(item, index) in mediaList" :key="index">
          <img src="@/assets/img/static/nuandong_sj.png" alt="media" class="media-image">
          <div class="media-content">
            <h3>{{item.name}}</h3>
            <p class="media-source">{{item.time}}</p>
            <p>{{item.content}}</p>
            <a href="javascript:;">查看报道 →</a>
          </div>
        </div>
      </div>
    </div>



    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #1e5799;
}/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 30px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 新闻资讯区 */
.news-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 动态资讯 */
.news-list {
  margin-top: 30px;
}

.news-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e0e9ff;
}

.news-date {
  width: 120px;
  color: #207cca;
  font-weight: bold;
  font-size: 16px;
}

.news-content {
  flex: 1;
}

.news-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #1e5799;
}

.news-content p {
  color: #666;
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.8;
}

.news-content a {
  color: #1e5799;
  text-decoration: none;
  font-weight: bold;
}

.news-content a:hover {
  text-decoration: underline;
}

.news-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 基础设施风采 */
.gallery-section {
  margin-top: 50px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.gallery-caption {
  padding: 20px;
  background-color: white;
}

.gallery-caption h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.gallery-caption p {
  color: #666;
  font-size: 14px;
}

/* 视频展示 */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: 30px 0;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 媒体报道 */
.media-list {
  margin-top: 30px;
}

.media-item {
  display: flex;
  margin-bottom: 30px;
  background-color: #f9fbff;
  border-radius: 8px;
  overflow: hidden;
}

.media-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.media-content {
  flex: 1;
  padding: 20px;
}

.media-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.media-content .media-source {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.media-content p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

.media-content a {
  display: inline-block;
  margin-top: 15px;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
}
</style>